<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/static/slide/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:if="${systemTitle}" th:text="${modifyPwd}+${systemTitle}"></title>
    <title th:text="${modifyPwd}+' | HZERO'" th:unless="${systemTitle}"></title>

    <link rel="stylesheet" th:href="@{/static/slide/css/bootstrap-3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/slide/css/find_password.css}"/>

    <script th:src="@{/static/slide/js/jquery.min.js}"></script>
    <script th:src="@{/static/slide/js/jsencrypt.min.js}"></script>
    <script th:src="@{/static/slide/js/jquery.validate.min.js}"></script>
    <script th:src="@{/static/slide/js/password-find.js}"></script>

    <template id="templateData"
              th:attr="data-copyright=${copyright},data-loginUrl=@{/login(template=${template})},data-modifyPwd=${modifyPwd},data-optionSucceeded=${optionSucceeded},data-optionFailed=${optionFailed},data-checkAccount=${checkAccount},data-resetPassword=${resetPassword},data-complete=${complete},data-validateAccountErr=${validateAccountErr},data-validateAccountFailed=${validateAccountFailed},data-userNameNotNull=${userNameNotNull},data-findAccount=${findAccount},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-cancel=${cancel},data-nextStep=${nextStep},data-preStep=${preStep},data-validatePwdRepeat=${validatePwdRepeat},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-getCaptcha=${getCaptcha},data-newPwdCanNotNul=${newPwdCanNotNul},data-resetPwdErr=${resetPwdErr},data-resetPwd=${resetPwd},data-pwdRepeatMsg=${pwdRepeatMsg},data-resetPwdSucceeded=${resetPwdSucceeded},data-loadingNow=${loadingNow},data-pwdRepeat=${pwdRepeat},data-validateLength=${validateLength},data-validateLower=${validateLower},data-validateUpper=${validateUpper},data-validateDigit=${validateDigit},data-validateSpecial=${validateSpecial},data-atLeast=${atLeast},data-validateUserName=${validateUserName},data-publicKey=${session.publicKey}">
    </template>

</head>

<body>
<div id="app">
    <div class="password-container password-layout">
        <div class="password-layout-header">
            <div class="logo">
                <a th:href="@{/login(template=${template})}">
                    <img alt="HZERO" height="24px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/slide/img/logo.png'"/>
                </a>
            </div>
        </div>
        <div class="password-layout-content">
            <div class="password-tab">
                <div class="password-steps">
                    <div class="password-steps-item password-steps-item-process"
                         th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ? 'password-steps-item-finish' : ''">
                        <div class="password-steps-item-icon">
                <span class="password-steps-icon"
                      th:text="${param.currentStep != null ? param.currentStep[0] : '0'} != '0'?'√':'1'">1</span>
                        </div>
                        <div class="password-steps-item-content">
                            <div class="password-steps-item-title" th:text="${checkAccount}">确认账号</div>
                        </div>
                    </div>
                    <div class="password-steps-item"
                         th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ?'password-steps-item-process': 'password-steps-item-wait'">
                        <div class="password-steps-item-icon">
                <span class="password-steps-icon"
                      th:text="${param.currentStep != null ? param.currentStep[0] : '0'} == '2'?'√':'2'">2</span>
                        </div>
                        <div class="password-steps-item-content">
                            <div class="password-steps-item-title" th:text="${resetPassword}">重置密码</div>
                        </div>
                    </div>
                    <div class="password-steps-item"
                         th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} == '2' ? 'password-steps-item-process' : 'password-steps-item-wait'">
                        <div class="password-steps-item-icon">
                            <span class="password-steps-icon">3</span>
                        </div>
                        <div class="password-steps-item-content">
                            <div class="password-steps-item-title" th:text="${complete}">完成</div>
                        </div>
                    </div>
                </div>

                <div class="password-spin-nested-loading">
                    <div class="password-spin-container">

                        <form id="formConfirmAccount"
                              th:if="${param.currentStep != null ? param.currentStep[0] : '0'} == 0">
                            <div class="password-form">
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input class="form-control password-form-input" id="account" name="account"
                                   th:placeholder="${findAccount}"
                                   type="text">
                          </div>
                        </div>
                      </span>
                    </span>
                                </div>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-row">
                        <div class="password-col-12">
                          <span class="password-form-item-children-prefix">
                            <div class="password-input-content">
                              <span class="password-form-input-prefix">
                                <i class="glyphicon glyphicon-pencil"></i>
                              </span>
                              <div class="form-group password-form-item-children-input">
                                <input class="form-control password-form-input" id="captcha" name="captcha"
                                       th:placeholder="${captchaPlaceholder}"
                                       type="text">
                              </div>
                            </div>
                          </span>
                        </div>
                        <div class="password-col-12">
                          <a class="password-account-captcha">
                            <img alt="Captcha" class="password-account-captcha-image"
                                 src="/oauth/password/captcha.jpg"/>
                          </a>
                        </div>
                      </div>
                    </span>
                                </div>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-col-12">
                        <button class="btn btn-raised password-btn password-btn-cancel" th:text="${cancel}"
                                type="button"></button>
                      </div>
                      <div class="password-col-12">
                        <button class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                                th:text="${nextStep}"
                                type="submit"></button>
                      </div>
                    </span>
                                </div>
                            </div>
                        </form>

                        <form id="formResetPassword"
                              th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 1">
                            <div class="password-form">
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input class="form-control password-form-input" id="password" name="password"
                                   th:placeholder="${resetPwd}"
                                   type="password">
                            <span class="glyphicon glyphicon-eye-close look"></span>
                          </div>
                        </div>
                      </span>
                      <div class="password-validate popover" style="display:block"></div>
                    </span>
                                </div>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input class="form-control password-form-input" id="passwordRepeat" name="passwordRepeat"
                                   th:placeholder="${pwdRepeat}" type="password">
                            <span class="glyphicon glyphicon-eye-close look"></span>
                          </div>
                        </div>
                      </span>
                    </span>
                                </div>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-row">
                        <div class="password-col-12">
                          <span class="password-form-item-children-prefix">
                            <div class="password-input-content">
                              <span class="password-form-input-prefix">
                                <i class="glyphicon glyphicon-pencil"></i>
                              </span>
                              <div class="form-group password-form-item-children-input">
                                <input class="form-control password-form-input" id="passwordCaptcha"
                                       name="passwordCaptcha"
                                       th:placeholder="${captchaPlaceholder}" type="text">
                              </div>
                            </div>
                          </span>
                        </div>
                        <div class="password-col-12">
                          <button class="btn btn-flat btn-raised password-form-button-captcha" th:text="${getCaptcha}"
                                  type="button"></button>
                        </div>
                      </div>
                    </span>
                                </div>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-col-12">
                        <button class="btn btn-raised password-btn password-btn-cancel" th:text="${preStep}"
                                type="button"></button>
                      </div>
                      <div class="password-col-12">
                        <button class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                                th:text="${complete}"
                                type="submit"></button>
                      </div>
                    </span>
                                </div>
                            </div>
                        </form>

                        <form class="password-success" id="resetPasswordSuccess"
                              th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 2">
                            <div class="password-form">
                                <img src="/oauth/static/slide/img/illustrate_success.png"/>
                                <p class="finish-fonts" th:text="${resetPwdSucceeded}"></p>
                                <div class="password-form-item">
                    <span class="password-form-item-children">
                      <button class="btn btn-raised button-login" th:text="${loadingNow}" type="submit"></button>
                    </span>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <div class="password-layout-footer"
             th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
        </div>
    </div>
</div>
<div class="password-notification"></div>
</body>

</html>